<div class="tab-configuration">
    <div class="content_wrapper">
        <div class="tab_title" i18n="tabConfiguration"></div>
        <div class="cf_doc_version_bt">
            <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
        </div>
        <div class="note">
            <p i18n="configurationFeaturesHelp"></p>
        </div>

        <div class="grid-row grid-box col2">

            <div class="col-span-1">
                <!-- SYSTEM CONFIGURATION -->
                <div class="systemconfig">
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationSystem"></div>
                        </div>
                        <div class="spacer_box">
                            <div class="note">
                                <p class="systemconfigNote" i18n="configurationLoopTimeHelp"></p>
                            </div>
                            <div class="select">
                                <input type="text" class="gyroFrequency" readonly />
                                <select class="gyroSyncDenom">
                                    <!-- list generated here -->
                                </select>
                                <span i18n="configurationGyroSyncDenom"></span>
                            </div>
                            <div class="select">
                                <select class="pidProcessDenom">
                                    <!-- list generated here -->
                                </select>
                                <span i18n="configurationPidProcessDenom"></span>
                                <div class="helpicon cf_tip" i18n_title="configurationPidProcessDenomHelp"></div>
                            </div>
                            <div class="select">
                                <div>
                                    <input type="checkbox" id="accHardwareSwitch" class="toggle" />
                                </div>
                                <span class="freelabel" i18n="configurationAccHardware"></span>
                            </div>
                            <div class="select">
                                <div>
                                    <input type="checkbox" id="baroHardwareSwitch" class="toggle" />
                                </div>
                                <span class="freelabel" i18n="configurationBaroHardware"></span>
                            </div>
                            <div class="select">
                                <div>
                                    <input type="checkbox" id="magHardwareSwitch" class="toggle" />
                                </div>
                                <span class="freelabel" i18n="configurationMagHardware"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END SYSTEM CONFIGURATION-->
                <!-- PERSONALIZATION-->
                <div class="gui_box grey miscSettings">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationPersonalization"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="number">
                            <label> <input type="text" name="craftName" maxlength="16" style="width:100px;"/> <span
                                i18n="craftName"></span>
                            </label>
                            <div class="helpicon cf_tip" i18n_title="configurationCraftNameHelp"></div>
                        </div>
                        <div class="number pilotName">
                            <label> <input type="text" name="pilotName" maxlength="16" style="width:100px;"/> <span
                                i18n="configurationPilotName"></span>
                            </label>
                            <div class="helpicon cf_tip" i18n_title="configurationPilotNameHelp"></div>
                        </div>
                    </div>
                </div> <!-- END PERSONALIZATION-->
                <!-- CAMERA -->
                <div class="gui_box grey miscSettings accelNeeded">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationCamera"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="number fpvCamAngleDegrees">
                            <label> <input type="number" name="fpvCamAngleDegrees" step="1" min="0" max="90" /> <span
                                i18n="configurationFpvCamAngleDegrees"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- END CAMERA -->
                <!-- MAXIMUM ARMING ANGLE-->
                <div class="gui_box grey accelNeeded">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationArming"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationArmingHelp"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="number">
                            <label>
                                <input type="number" id="configurationSmallAngle" step="1" min="1" max="180" />
                                <span i18n="configurationSmallAngle"></span>
                                <div class="helpicon cf_tip" i18n_title="configurationSmallAngleHelp"></div>
                            </label>
                        </div>
                        <div class="number">
                            <label>
                                <input type="number" id="configurationAutoDisarmDelay" step="1" min="0" max="60" />
                                <span i18n="configurationAutoDisarmDelay"></span>
                                <div class="helpicon cf_tip" i18n_title="configurationAutoDisarmDelayHelp"></div>
                            </label>
                        </div>
                        <div class="select">
                            <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
                                <input type="checkbox" id="configurationGyroCalOnFirstArm" class="toggle" />
                            </div>
                            <span class="freelabel" i18n="configurationGyroCalOnFirstArm"></span>
                        </div>
                    </div>
                </div>
                <!-- END MAXIMUM ARMING ANGLE-->
                <!-- OTHER FEATURES -->
                <div class="featuresOther">
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationFeatures"></div>
                        </div>
                        <div class="spacer_box">
                            <div class="note">
                                <p i18n="configurationOtherFeaturesHelp"></p>
                            </div>
                            <table class="featuresMultiple">
                                <thead>
                                    <tr>
                                        <th i18n="configurationFeatureEnabled"></th>
                                        <th i18n="configurationFeatureDescription"></th>
                                        <th i18n="configurationFeatureName"></th>
                                    </tr>
                                </thead>
                                <tbody class="features other" id="noline">
                                    <!-- table generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END OTHER FUTURES-->
            </div> <!-- END grid-col col6 -->
            <div class="col-span-1">
                <!-- BOARD ORIENTATION -->
                <div class="board acc">
                    <!-- BOARD ALIGNMENT -->
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationBoardAlignment"></div>
                            <div class="helpicon cf_tip" i18n_title="configurationBoardAlignmentHelp"></div>
                        </div>
                        <div class="spacer_box">
                            <div class="sensor_align_content">
                                <div class="sensor_align_inputs">
                                    <div class="alignicon roll"></div>
                                    <label>
                                        <input type="number" name="board_align_roll" step="1" min="-180" max="360" />
                                        <span i18n="configurationBoardAlignmentRoll"></span>
                                    </label>
                                </div>
                                <div class="sensor_align_inputs">
                                    <div class="alignicon pitch"></div>
                                    <label>
                                        <input type="number" name="board_align_pitch" step="1" min="-180" max="360" />
                                        <span i18n="configurationBoardAlignmentPitch"></span>
                                    </label>
                                </div>
                                <div class="sensor_align_inputs">
                                    <div class="alignicon yaw"></div>
                                    <label>
                                        <input type="number" name="board_align_yaw" step="1" min="-180" max="360" />
                                        <span i18n="configurationBoardAlignmentYaw"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END BOARD ALIGNMENT -->
                <!-- GYRO ALIGNMENT -->
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationGyroAlignment"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationGyroAlignmentHelp"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="sensor_align_content">
                            <div class="gyro_alignment_inputs gyro_alignment_inputs_selection">
                                <label>
                                    <select class="gyro_to_use">
                                        <!-- list generated here -->
                                    </select>
                                    <span i18n="configurationSensorGyroToUse"></span>
                                </label>
                            </div>
                            <div class="gyro_alignment_inputs gyro_alignment_inputs_first">
                                <label>
                                    <span>
                                        <select class="gyro_1_align">
                                            <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
                                            <!-- list generated here -->
                                        </select>
                                        <span i18n="configurationSensorAlignmentGyro1"></span>
                                    </span>
                                </label>
                            </div>
                            <div class="gyro_alignment_inputs gyro_alignment_inputs_second">
                                <label>
                                    <select class="gyro_2_align">
                                        <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
                                        <!-- list generated here -->
                                    </select>
                                    <span i18n="configurationSensorAlignmentGyro2"></span>
                                </label>
                            </div>
                            <div class="gyro_alignment_inputs gyro_alignment_inputs_notfound">
                                <span class="message-negative" i18n="configurationSensorGyroToUseNotFound"></span>
                            </div>
                            <div class="spacer_box gyro_align_box">
                                <div class="sensor_align_content">
                                    <div class="gyro_align_inputs sensor_align_inputs">
                                        <div class="alignicon roll"></div>
                                        <label>
                                            <input type="number" name="gyro_align_roll" step="1" min="-180" max="360" />
                                            <span i18n="configurationGyroAlignmentRoll"></span>
                                        </label>
                                    </div>
                                    <div class="gyro_align_inputs sensor_align_inputs">
                                        <div class="alignicon pitch"></div>
                                        <label>
                                            <input type="number" name="gyro_align_pitch" step="1" min="-180" max="360" />
                                            <span i18n="configurationGyroAlignmentPitch"></span>
                                        </label>
                                    </div>
                                    <div class="gyro_align_inputs sensor_align_inputs">
                                        <div class="alignicon yaw"></div>
                                        <label>
                                            <input type="number" name="gyro_align_yaw" step="1" min="-180" max="360" />
                                            <span i18n="configurationGyroAlignmentYaw"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- END GYRO ALIGNMENT -->
                <!-- MAGNETOMETER ALIGNMENT -->
                <div class="gui_box grey mag_align_box">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationMagAlignment"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationBoardAlignmentHelp"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="select">
                            <label>
                                <select class="mag_align">
                                    <option value="0" i18n="configurationSensorAlignmentDefaultOption"></option>
                                    <!-- list generated here -->
                                </select>
                            </label>
                        </div>
                        <div class="sensor_align_content">
                            <div class="mag_align_inputs sensor_align_inputs">
                                <div class="alignicon roll"></div>
                                <label>
                                    <input type="number" name="mag_align_roll" step="1" min="-180" max="360" />
                                    <span i18n="configurationMagAlignmentRoll"></span>
                                </label>
                            </div>
                            <div class="mag_align_inputs sensor_align_inputs">
                                <div class="alignicon pitch"></div>
                                <label>
                                    <input type="number" name="mag_align_pitch" step="1" min="-180" max="360" />
                                    <span i18n="configurationMagAlignmentPitch"></span>
                                </label>
                            </div>
                            <div class="mag_align_inputs sensor_align_inputs">
                                <div class="alignicon yaw"></div>
                                <label>
                                    <input type="number" name="mag_align_yaw" step="1" min="-180" max="360" />
                                    <span i18n="configurationMagAlignmentYaw"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationMagAlignment"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationMagAlignmentHelp"></div>
                    </div>
                </div>
                <!-- END MAGNETOMETER ALIGNMENT -->

                <!-- MAGNETIC DECLINATION -->
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationMagDeclination"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationMagDeclinationHelp"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="number mag_declination">
                            <label> <input type="number" name="mag_declination" step="0.1" min="-30.0" max="30.0" />
                            <span i18n="configurationMagDeclinationInput"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- END MAGNETIC DECLINATION -->

                <!-- RANGEFINDER -->
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box title" i18n="configurationRangefinder"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationRangefinderHelp"></div>
                    </div>
                    <div class="spacer_box rangefinder">
                        <div>
                            <select class="rangefinderType">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationRangefinderType"></span>
                        </div>
                    </div>
                </div>
                <!-- END RANGEFINDER -->

                <!-- OPTICALFLOW -->
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box title" i18n="configurationOpticalflow"></div>
                        <div class="helpicon cf_tip" i18n_title="configurationOpticalflowHelp"></div>
                    </div>
                    <div class="spacer_box opticalflow">
                        <div>
                            <select class="opticalflowType">
                                <!-- list generated here -->
                            </select>
                            <span i18n="configurationOpticalflowType"></span>
                        </div>
                    </div>
                </div>
                <!-- END OPTICALFLOW -->

                <!-- ACCELEROMETER TRIM -->
                <div class="gui_box grey accelNeeded">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" i18n="configurationAccelTrims"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="number">
                            <label> <input type="number" name="roll" min="-300" max="300" /> <span
                                i18n="configurationAccelTrimRoll"></span>
                            </label>
                        </div>
                        <div class="number">
                            <label> <input type="number" name="pitch" min="-300" max="300" /> <span
                                i18n="configurationAccelTrimPitch"></span>
                            </label>
                        </div>
                    </div>
                </div> <!-- END ACCELEROMETER TRIM -->
                <!-- DSHOT BEEPER -->
                <div class="dshotBeeper">
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" i18n="configurationDshotBeeper"></div>
                            <div class="helpicon cf_tip" i18n_title="configurationDshotBeaconHelp"></div>
                        </div>
                        <div class="spacer_box">
                            <table>
                                <tbody class="dshot-beeper-configuration" id="noline">
                                    <tr class="dshotBeaconSwitch">
                                        <td>
                                            <div class="number">
                                                <div style="float: left; height: 20px; margin-right: 34px;">
                                                    <input class="dshot-beeper toggle" id="dshotBeeperSwitch" type="checkbox" />
                                                </div>
                                                <span i18n="configurationUseDshotBeeper"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="dshotbeacon">
                                        <td>
                                            <div class="select">
                                                <div style="float: left; height: 20px; margin-right: 10px;">
                                                    <select class="dshotBeeperBeaconTone">
                                                        <option value="0" hidden></option>
                                                        <!-- list generated here -->
                                                    </select>
                                                </div>
                                                <span i18n="configurationDshotBeaconTone"></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table>
                                <tbody class="dshotBeaconConditions" id="noline">
                                    <!-- table generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="beepers">
                    <!-- BEEPER -->
                    <div class="beepers">
                        <div class="gui_box grey">
                            <div class="gui_box_titlebar">
                                <div class="spacer_box_title" i18n="configurationBeeper"></div>
                            </div>
                            <div class="spacer_box">
                                <table>
                                    <tbody class="beeper-configuration" id="noline">
                                        <tr class="beeper-template" style="display:none">
                                            <td>
                                                <input class="condition toggle" id="" name="" title="" type="checkbox" />
                                            </td>
                                            <td>
                                                <div></div>
                                                <span class="xs"></span>
                                            </td>
                                            <td>
                                                <span class="sm-min"></span>
                                            </td>
                                        </tr>
                                        <!-- table generated here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<div class="content_toolbar toolbar_fixed_bottom">
    <div class="btn save_btn">
        <a class="save" href="#" i18n="configurationButtonSave"></a>
    </div>
</div>
